<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
</head>
<body>
<div class="a">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<div class="b">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<div class="c">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<div class="d">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<div class="e">
    <div>1</div>
    <div class="e1">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<div class="f">
    <div class="f1">1</div>
    <div class="">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<div class="e">
    <div>1</div>
    <div class="e1">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>
<h1>grid-area 属性</h1>

<p>你可以使用 <em>grid-area</em> 属性来命名网格元素。</p>

<p>命名的网格元素可以通过容器的 grid-template-areas 属性来引用。</p>

<p>网格布局容器，设置 6 行 3 列。</p>

<div class="grid-container">
    <div class="item1">Header</div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
</div>
<div class="g">
    <div class="g1">1</div>
    <div class="g2">2</div>
    <div class="g3">3</div>
    <div class="g4">4</div>
    <div class="g5">5</div>
    <div class="g6">6</div>
</div>
<div class="h">
    <div class="h1">1</div>
    <div class="h2">2</div>
    <div class="h3">3</div>
    <div class="h4">4</div>
    <div class="h5">5</div>
    <div class="h6">6</div>
</div>
<style>
    .h1{
        grid-area: 1 / span 3
    }
    .h2{
        grid-area: 3/3 /3/3;
    }
    .h4{
        grid-area: 2/2 /span 3/2;
    }
    .h5{
        grid-area: 2/3 /2/3;
    }
    .h{
        display: grid;
        background-color: blue;
        grid-template-columns:  auto auto;
        grid-gap: 10px;
        padding: 10px;
    }
    .h div{
        background-color: grey;
        padding: 30px 0;
        text-align: center;
    }
    .g1{
        grid-area: 1/3 /1/3;
    }
    .g2{
        grid-area: 2/3 /2/3 ;
    }
    .g3{

    }
    .g{
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: gray;
        padding: 10px;

    }
    .g div{
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;

    }
    .item1{
        grid-area: header;
    }
    .item2{
        grid-area: menu;
    }
    .item3{
        grid-area: main;
    }
    .item4{
        grid-area: right;
    }
    .item5{
        grid-area: footer;
    }
    .grid-container div{
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }

    .grid-container{
        display: grid;
        background-color: #2196F3;
        grid-template-areas:  'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
        grid-gap: 10px;
        padding: 10px;


    }
    .f1{

    }
    .f{
        grid-template-areas: 'area area . . ';
    }
    .f{
        background-color: #b490ca;
    }
    .e1{
        grid-area: 2/1 /span 2 /span 3
    }
    .e div:first-child{

        grid-row:  1/ span 3;
    }
    .e div:last-child{
        grid-column: 1 / span 3 ;
    }
    .e{
        background-color: blueviolet;

    }
    .d{
        background-color: #8a4419;
        grid-template-columns: 50px 50px 50px;

       align-content: start;
        height: 1000px;
    }
    .c{
        justify-content: end;
        grid-template-columns: 100px 100px 100px;
        background-color: goldenrod;
    }

    .b{
        grid-template-columns: 1fr 2fr 3fr !important;
        grid-gap: 30px;
        background-color: #999999;
        grid-template-rows: 100px 300px 500px;
    }
    .b div:first-child{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end:3;
    }
    .a,.b,.c,.d,.e,.f{
        display: grid;
        grid-template-columns: auto  auto auto;


    }
    .a div,.b div,.c div,.d div,.e div,.f div{
        border:1px solid black;
        padding: 30px;
        text-align: center;

    }
</style>
</body>
</html>